import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import router from '@/router'
import store from '@/store'

// 全局组件引入
import TypeNav from '@/components/TypeNav'
import Carousel from '@/components/Carousel'
import pagination from '@/components/pagination'
//全局组件注册
Vue.component(TypeNav.name, TypeNav)
Vue.component(Carousel.name, Carousel)
Vue.component(pagination.name, pagination)
// 引入mockServe文件 这个文件如同引入css文件 让该文件执行一次
import '@/mock/mockServe'
// 一次引入swiperCss样式,永久生效
import 'swiper/css/swiper.css'


// 将api文件导入 进行封装挂载
import * as API from '@/api'


// 按需引入 (支付页面的弹出框功能)
import { Button, MessageBox } from 'element-ui'
Vue.use(Button.name, Button);
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
// ----

// 引入图片懒加载插件
import VueLazyload from 'vue-lazyload'
// 图片与json无需暴露 可直接导入使用
import img from '@/assets/1.gif'
//注册并配置默认图片
Vue.use(VueLazyload, {
  loading: img
})
// ----

// 导入表单验证插件 让文件执行一下即可 无需接收
import '@/plugins/validate'

new Vue({
  render: h => h(App),
  // 全局总线
  beforeCreate: function () {
    Vue.prototype.$bus = this
    // 将api封装为对象挂载至vue原型便于组件使用(组件内无需导入了,通常是不使用vuex管理数据时这么操作)
    Vue.prototype.$API = API
  },
  router,
  store,

}).$mount('#app')
